$maincolor: rgb(212, 60, 51);

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.stickyBar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;

  .topBar {
    background-color: $maincolor;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    div:first-child {
      display: flex;

      svg {
        width: 142px;
        height: 64px;
      }
    }

    div:nth-child(2) {
      border-radius: 42.42px;
      border: 1px solid white;
      padding: 5px 10px;

      a {
        color: white;
      }
    }
  }

  nav {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #eaeaea;
    background-color: white;

    span {
      padding: 10px 0;
      position: relative;
      font-size: 15px;

      &.active {
        border-bottom: 2px solid $maincolor;
        // content: '';
        // display: block;
        // position: absolute;
        // left: -10%;
        // right: -10%;
        // bottom: -1px;
        // height: 2px;
        // background-color: $maincolor;
      }
    }
  }
}

h4 {
  position: relative;
  margin: 3% 0 3% 3%;
  font-weight: normal;
}

h4::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 80%;
  background-color: $maincolor;
  left: -3%;
  top: 16%;
}

main {
  margin-top: 121px;

  .tabContent li {
    display: none;

    &.active {
      display: block;
    }
  }

  .albumList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .album {
      width: 33%;
      margin-bottom: 17px;

      div {
        position: relative;
      }

      img {
        width: 100%;
      }

      span {
        color: white;
        position: absolute;
        top: 1%;
        right: 2%;
        font-size: small;

        svg {
          width: 1em;
          height: 1em;
          position: absolute;
          left: -14px;
          top: 3px;
        }
      }

      p {
        padding: 0px 2px 0px 6px;
        font-size: smaller;
      }
    }
  }

  .songList {
    margin-top: 10px;

    .singleSong {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 3%;
      padding-top: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      div:first-child {
        .songName {
          font-size: 17px;
        }

        .songDetail {
          font-size: 12px;
          color: #888;

          svg {
            position: relative;
            top: 2px;
            width: 1.3em;
            height: 1.3em;
          }
        }
      }

      > div:nth-child(2) {
        border: 1px solid #ababab;
        margin-right: 10px;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        position: relative;

        svg {
          width: 0.8em;
          height: 1em;
          fill: #aaaaaa;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .listNum {
      float: left;
      margin-top: 4%;
      margin-left: 2%;
      color: $maincolor;
    }
    .singleSong.hit {
      margin-left: 9%;
    }
  }

  .recommend {
    background: url(../img/footer.png);
    text-align: center;

    svg {
      width: 230px;
      height: 44px;
      margin-top: 40px;
    }

    .download {
      color: $maincolor;
      border: 1px solid $maincolor;
      padding: 10px 40px;
      display: inline-block;
      border-radius: 38px;
      margin: 20px 0 10px 0;
    }

    .copyright {
      font-size: 12px;
      transform: scale(0.75);
      padding-bottom: 10px;
    }
  }

  .hitlist {
    margin-top: -13px;
    width: 100%;
    height: 161px;
    background: url(../img/hitlist.jpg);
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;

    &::after {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.2);
    }

    .hitbarwrap {
      padding-left: 20px;
      z-index: 2;

      .hitbar {
        width: 142px;
        height: 67px;
        background: url(../img/hitlistfont.png);
        background-size: 166px 97px;
        //size 和url的先后顺序有影响
        background-position: -24px -30px;
      }

      .updatetime {
        margin-top: 10px;
        color: hsla(0, 0%, 100%, 0.8);
        font-size: 12px;
      }
    }
  }

  .searchform {
    text-align: center;
    position: relative;

    input {
      width: 95%;
      height: 30px;
      font-size: 14px;
      border-radius: 20px;
      outline: none;
      border: 1px solid #efefef;
      padding-left: 6%;
      background-color: #f1f1f1;
    }

    .searchIcon {
      position: absolute;
      top: 28%;
      left: 4%;
      width: 4%;
      height: 50%;
      background: url(../img/search.svg) no-repeat;
    }
  }

  .search {
    margin-top: 15px;
    padding: 15px 10px 0;
    border-top: 1px solid #f9f8f8;

    h3 {
      font-size: 12px;
      line-height: 12px;
      color: #666;
      font-weight: normal;
    }

    .hotsearch {
      margin-top: 10px;

      a {
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 0 14px;
        font-size: 14px;
        line-height: 32px;
        color: #333;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 18px;
      }
    }

    .searchhistory {
      li {
        display: flex;
        align-items: center;

        svg {
          fill: #c9caca;
          width: 1.4em;
          height: 1.4em;
        }

        > div {
          margin-left: 10px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 45px;
          position: relative;

          svg {
            width: 1.4em;
            height: 1.4em;
          }

          &::after {
            content: "";
            position: absolute;
            bottom: -90px;
            width: 300%;
            height: 300%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            transform-origin: top left;
            transform: scale(0.333333);
          }
        }
      }
    }
  }
}
